<script setup lang="ts">
import CdlTable from "@/components/table";
import type {TableTree} from "@/interfaces/components/Table";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import { h, reactive } from "vue";
import {Query, Request, State, Mode} from "@/interfaces/components/Page";
import CdlSearch from "@/components/search";
import {FormTree} from "@/interfaces/components/Form";
import {appStore} from "@/store/modules/app";
import {useRouter} from "vue-router";
import { createPopup } from "@/utils/createPopup";
import ProjectApplyDetails from "@/views/projectManage/project/projectApplyDetails.vue";
import {Project} from "@/interfaces/views/project/project";

const request: Request ={
  createdIsNeed: true,
  url: "/project/projectApply",
}
const router = useRouter()
const store = appStore()
const searchTree: FormTree<Project> = [
  [
    {label: "申请状态", component: "select", options: store.getDict("project_handle_state"), optionProps: {
        label: "dictLabel", value: "dictValue"
      }, prop: "applicationStatus"},
    {label: "订单类型", component: "select", prop: "typeId"},
    {component: "datePicker", type: "daterange", prop: "createTime", label: "创建日期区间",
      startPlaceholder: "开始日期", endPlaceholder: "结束日期"},
  ]
]
const tabTree: TableTree<Project> = {
  colRule: [
    {ti: "订单申请编号", prop: "id", width: 200},
    {ti: "订单类型", prop: "typeId", dict: "project_type"},
    {ti: "申请人", prop: "shipperName"},
    {ti: "申请状态", prop: "applicationStatus", dict: "project_apply_state"},
    {ti: "装货点", prop: "loadingAddress", tooltip: true},
    {ti: "卸货点", prop: "unloadingAddress", tooltip: true},
    {ti: "货物名称", prop: "cargoName"},
    {ti: "申请时间", prop: "applicationTimeline"},
    {ti: "备注", prop: "remark"},
  ],
  control: [
    {name: "详情", type: "info", prop: "id", method: openProjectApplyDetails}
  ]
}
const state = reactive<State<Query<Project>, Project>>({
  queryForm: {
  },
  dataList: []
})

function openProjectApplyDetails(id: string){
  createPopup("订单详情", h(ProjectApplyDetails, {
    id: id,
    query: query
  }))
}

/**
 * 回调处理
 * @param mode
 * @param val
 */
function popupCallBack(mode: Mode, val?: any){
  switch (mode){
    case "search":
      query(val)
      break
    case "resetting":
      query()
      break
  }
}

const {query, handleSizeChange, handleCurrentChange, loading} = useTablePagingTemplate(request, state)
</script>

<template>
  <el-card>
    <CdlSearch model="" :template-tree="searchTree" @submit="popupCallBack">
      <template #menu>
        <el-button type="warning">导出</el-button>
      </template>
    </CdlSearch>
    <CdlTable :data="state.dataList" :template-tree="tabTree" :loading="loading"></CdlTable>
    <el-pagination
        :current-page="state.page"
        :page-sizes="state.pageSizes!"
        :page-size="state.limit"
        :total="state.total"
        hide-on-single-page
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-card>
</template>
